<!--
 * @Author: 宋杰
 * @Date: 2020-12-30 20:30:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-12 17:28:10
 * @Description: 一家十一口(猜一字) 信用评价 >>>评估开放 被评审的机构一览
-->
<template>
  <div class="div1">
    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <!-- 审批状态 -->
          <div class="topBox3_sou2">
            <div>审批状态: </div>
            <el-select v-model="value">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 评估活动标题 -->
          <div class="topBox3_sou2">
            <div>机构名称: </div>
            <el-input v-model="value1" placeholder="机构名称"></el-input>
          </div>

          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
            
        </div>
        <div @click="back"> <el-button type="primary">返回</el-button></div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="serialNumber" label="序号"> </el-table-column>
        <el-table-column prop="organization" label="机构名称">
        </el-table-column>
        <el-table-column prop="type" label="机构审批状态">
        </el-table-column>
        <el-table-column prop="ExperienceContent" label="机构是否申诉">
        </el-table-column>
        <el-table-column prop="ApplicationDate" label="创建时间">
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看详情</el-button
            >
            <!-- <el-button type="text" size="small">启动</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "1",
          label: "全部"
        },
        {
          value: "2",
          label: "已审核"
        },
        {
          value: "3",
          label: "待审核"
        },
      ],
      value: "1",
      value1: "",

      // con
      tableData: [
        {
          serialNumber: "1",
          ApplicationDate: "2020.2.6",
          type: "已审核",
          organization: "新东方培训机构",
          ExperienceContent: "是",
          ReviewOperation: "申报单位自评",
          ReviewResults: ""
        }
      ],
      // con end
      // 分页
      currentPage1: 5,
      // 分页end
      centerDialogVisible2: false, //弹窗
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        value2: ""
      },
      //   弹窗 日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    back(){
        this.$router.go(-1);//返回上一层
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 操作
    handleClick(row) {
      console.log(row);
       this.$router.push({ name: "AApplicationInformation" });
    }
  }
};
</script>
<style scoped>
.div1 {
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
  width: 100%;
}
.div2,
.div3 {
  background: #fff;
  padding: 10px;
}

.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 49px;
  padding: 0 10px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou2 {
  display: flex;
  align-items: center;
  margin-right: 16px;
}
.topBox3_sou2 >:nth-child(1) {
  margin-right: 6px;
}

.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou1 >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  /* justify-content: flex-end; */
  width: 100%;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
.topBox3_sou1 >>> .el-input__icon.el-icon-date {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
  margin: 0;
  position: absolute;
  top: 0;
  right: 5px;
}
.topBox3_sou1 >>> .el-input__suffix {
  right: 25px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}
/* 分页end */
</style>
